import  React,{Component} from 'react';
import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';
import {HeaderWrapper,HeaderHead,HeaderRight} from './style';
import {Menu} from 'antd';
import {gotogetMenu} from "./store/actionCreators";
import Img from '../icon/dingbu.png';

const SubMenu = Menu.SubMenu;
 class Header extends Component{
    state = {
        current: 'mail',
    };

    handleClick = (e) => {
        this.setState({
            current: e.key,
        });
    };
render(){
    return(
        <HeaderWrapper >
            <HeaderHead >
                <NavLink to='/'>
                    <img className='dingBu' src={Img} alt='' />
                </NavLink>
                <HeaderRight>
                    <div  style={{marginRight:'30px',float:'left',cursor:'pointer'}}>电信微博</div>
                <div style={{float:'left',cursor:'pointer'}} onClick={()=>{window.open('http://i.youku.com/u/UNTg0OTIxMDQ4')}}>电信优酷</div>
                </HeaderRight>
            </HeaderHead>

                <Menu forceSubMenuRender onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal" style={{background: '#264f7e', textAlign:"center" }} >
                    <SubMenu key='0' title={<NavLink to='/'><span className="submenu-title-wrapper item" style={{marginLeft:'0vw'}} >电信首页</span></NavLink>}>
                    </SubMenu>
                    {/*{this.props.barMenu.map(menu => <SubMenu key={menu.get('id')}  title={menu.get('barPath')==='/ListPage'?<NavLink replace to={{pathname: menu.get('barPath'), state: {url:menu.get('barUrl'),id:menu.get('id')}}}><span className="submenu-title-wrapper item" >{menu.get('barType')}</span></NavLink>:*/}
                            {/*menu.get('barPath')==='/HtmlPage'?<a onClick={()=>{window.open(window.barIp+menu.get('barPath')+menu.get('barUrl'))}}><span className="submenu-title-wrapper item" >{menu.get('barType')}</span></a>:<a  onClick={()=>{window.open(menu.get('barPath'))}}><span className="submenu-title-wrapper item" >{menu.get('barType')}</span></a>}>*/}

                    {this.props.barMenu.map(menu => <SubMenu style={{padding:'0'}} key={menu.get('id')}  title={<span className="submenu-title-wrapper item" >{menu.get('barType')}</span>}>

                    {menu.get('menu').map((minimenu)=><Menu.Item  style={{margin:'0',background:'#e1ebf4',textAlign:'center'}} key={minimenu.get('id')}  >
                        {minimenu.get('menuPath') === '/ListPage' ? <NavLink  replace to={{pathname: minimenu.get('menuPath'), state: {url: minimenu.get('menuUrl'),bar:menu.toJS()}}}><p style={{color:'#254e7e',fontWeight:'bold'}}>{minimenu.get('menuValue')}</p></NavLink> :
                                    minimenu.get('menuPath') === '/HtmlPage' ? <p style={{color:'#254e7e',fontWeight:'bold'}} onClick={()=>{window.open(window.barIp+minimenu.get('menuPath')+minimenu.get('menuUrl'))}} >{minimenu.get('menuValue')}</p>:<p style={{color:'#254e7e',fontWeight:'bold'}} onClick={()=>{window.open(minimenu.get('menuPath'))}}>{minimenu.get('menuValue')}</p>
                                }
                            </Menu.Item>)}
                        </SubMenu> )}

                </Menu>

        </HeaderWrapper>
    )
}
     componentDidMount(){//初始化
         this.props.getMenu();
     }
}
const mapState=(state)=>({
    barMenu:state.getIn(['header','barMenu'])
});
const mapDispatch=(dispatch)=>({
    getMenu(){
    dispatch(gotogetMenu());
    }
})

export default connect(mapState,mapDispatch)(Header);